<template>
  <div class="screen-export-page">
    <el-card class="export-card">
      <div class="export-header">
        <span class="export-title">大屏导出与分享</span>
      </div>

      <div class="export-body">
        <!-- 分享码与二维码展示 -->
        <el-row class="share-section" :gutter="20">
          <el-col :span="12">
            <el-input
              v-model="shareLink"
              label="分享链接"
              placeholder="复制此链接进行分享"
              readonly
            />
          </el-col>
          <el-col :span="12">
            <div class="qr-code">
              <qrcode-vue :value="shareLink" :size="128" />
            </div>
          </el-col>
        </el-row>

        <div class="export-options">
          <!-- 导出选项 -->
          <el-button @click="exportImg" type="success">导出为图片</el-button>
          <el-button @click="exportConfig" type="primary">导出配置文件</el-button>
          <el-button @click="importConfig" type="info">导入配置文件</el-button>
        </div>

        <el-divider />

        <!-- 生成分享码按钮 -->
        <el-button type="primary" @click="generateShareLink" style="width:100%">
          生成分享链接
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import html2canvas from 'html2canvas'
import * as XLSX from 'xlsx'
import QrcodeVue from 'qrcode.vue'

const route = useRoute()

// 当前大屏数据（模拟）
const screenData = ref({
  name: '生产大屏',
  components: ['KPI卡片', '图表', '地图'],
  theme: '深色',
  layout: {
    components: [
      { type: 'chart', x: 60, y: 60, width: 400, height: 250, data: [120, 200, 150] },
      { type: 'kpi', x: 500, y: 60, width: 180, height: 80, value: 1000, label: 'KPI Value' },
    ],
  },
})

const shareLink = ref('')

// 生成分享链接
function generateShareLink() {
//   const routeParams = route.params
//   if (!routeParams || !routeParams.id) {
//     ElMessage.error('大屏ID无效或未提供')
//     return
//   }
  shareLink.value = `${window.location.origin}/screen/preview/1`
}


// 导出为图片
async function exportImg() {
  const canvas = await html2canvas(document.querySelector('.el-card'), { useCORS: true })
  const link = document.createElement('a')
  link.href = canvas.toDataURL('image/png')
  link.download = `${screenData.value.name}.png`
  link.click()
  ElMessage.success('大屏已导出为图片！')
}

// 导出配置文件
function exportConfig() {
  const json = JSON.stringify(screenData.value.layout)
  const blob = new Blob([json], { type: 'application/json' })
  const link = document.createElement('a')
  link.href = URL.createObjectURL(blob)
  link.download = `${screenData.value.name}-config.json`
  link.click()
  ElMessage.success('配置文件已导出！')
}

// 导入配置文件
function importConfig() {
  const input = document.createElement('input')
  input.type = 'file'
  input.accept = '.json'
  input.onchange = (event) => {
    const file = event.target.files[0]
    const reader = new FileReader()
    reader.onload = () => {
      try {
        const config = JSON.parse(reader.result)
        screenData.value.layout = config
        ElMessage.success('配置文件已导入！')
      } catch (err) {
        ElMessage.error('配置文件格式错误！')
      }
    }
    reader.readAsText(file)
  }
  input.click()
}

function goBack() {
  useRouter().push({ name: 'ScreenList' })
}
</script>

<script>
import QrcodeVue from 'qrcode.vue'
export default {
  name: 'ScreenExport',
  components: { QrcodeVue },
}
</script>

<style scoped>
.screen-export-page {
  padding: 24px;
  background: #f7f8fa;
}

.export-card {
  max-width: 900px;
  margin: 0 auto;
  border-radius: 12px;
}

.export-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.export-title {
  font-size: 20px;
  font-weight: 600;
}

.export-options {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}

.qr-code {
  display: flex;
  justify-content: center;
  align-items: center;
}

.share-section {
  margin-bottom: 20px;
}
</style>
